<template>
  <div>

    <el-row>

      <div style=" margin-left: 20px ;margin-top: 20px" class="first-title__title">
        收款配置
      </div>
      <div class="first-title__desc" style=" margin-left: 40px ;margin-top: 20px">
        为了理解用户交易行为、保障用户在小程序生态汇总的交易体验、打通微信生态内场景，。
      </div>
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between;align-content: center;padding: 20px 30px 10px 10px">

        <div style="display: flex;justify-content: space-between;align-content:flex-end">
          <svg t="1622859263001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1215" width="50" height="50">
            <path
              d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
              fill="#09BB07" p-id="1216"></path>
          </svg>
          <div style="margin-left: 60px">
            <div class="action-card-list__panel-title">
              微信
            </div>
            <div class="action-card-list__panel-describe">
              微信收款绑定内场景，有赞已接入微信自定义版交
            </div>
          </div>
        </div>

        <div style="justify-content: space-between;">


          <!--            <span class="action-card-list__panel-title" style="cursor:pointer;" >设为默认</span>-->

          <!--默认收款方式图标-->
<!--          <el-tooltip content="默认收款方式" placement="top" effect="light">-->
<!--            <svg v-if="false" t="1622878148571" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
<!--                 xmlns="http://www.w3.org/2000/svg"-->
<!--                 p-id="6347" width="30" height="30" style="margin:10px 10px 10px 10px ;cursor:pointer;">-->
<!--              <path-->
<!--                d="M511.3 828.3c173.7 0 315.1-141.4 315.1-315.1 0-173.7-141.3-315.1-315.1-315.1-173.7 0-315.1 141.4-315.1 315.1 0.1 173.7 141.4 315.1 315.1 315.1m0 59.1c-206.6 0-374.2-167.5-374.2-374.2 0-206.6 167.6-374.1 374.2-374.1s374.1 167.5 374.1 374.1c0.1 206.7-167.4 374.2-374.1 374.2z"-->
<!--                fill="#1afa29" p-id="6348"></path>-->
<!--              <path-->
<!--                d="M486.4 657.7c-7.5 0-15.1-2.9-20.9-8.6L326.2 509.8c-11.5-11.6-11.5-30.3 0-41.8 5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6l118.3 118.3 188-187.9c5.8-5.8 13.4-8.7 20.9-8.7 7.5 0 15.1 2.9 20.9 8.7 11.5 11.5 11.5 30.2 0 41.7l-208.9 209c-5.7 5.7-13.3 8.6-20.8 8.6z"-->
<!--                fill="#1afa29" p-id="6349"></path>-->
<!--            </svg>-->
<!--          </el-tooltip>-->
          <!--配置收款信息图标-->
<!--          <el-tooltip content="配置微信收款信息" placement="top" effect="light">-->
<!--            <svg t="1622877284357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
<!--                 p-id="2193" width="30" height="30" @click="handleAdd(0)"-->
<!--                 style="margin:10px 10px 10px 10px ;cursor:pointer;">-->
<!--              <path-->
<!--                d="M424.89856 954.61888a25.01632 25.01632 0 0 1-24.20224-18.89792l-26.7008-106.90048-90.50112 60.29824a24.90368 24.90368 0 0 1-31.09888-2.80064l-121.29792-117.2992a24.92416 24.92416 0 0 1-3.3024-31.8976l62.40256-91.49952L83.2 619.52a24.81664 24.81664 0 0 1-19.00032-24.20224V432.72192a24.91904 24.91904 0 0 1 19.0976-24.20224l114.29888-27.60192-57.79456-85.49888a24.91392 24.91392 0 0 1 3.3024-31.8976l120.6016-116.59776a25.04704 25.04704 0 0 1 30.80192-3.0976L386.0992 202.5216l27.40224-105.90208a24.91904 24.91904 0 0 1 24.09984-18.69824h162.49856a24.832 24.832 0 0 1 24.20224 19.00032l27.29984 111.20128 91.60192-54.70208a24.9344 24.9344 0 0 1 30.19776 3.59936l117.89824 115.2a24.98048 24.98048 0 0 1 3.79904 30.8992l-58.50112 95.20128 104.29952 24.80128c11.20256 2.69824 19.2 12.6976 19.2 24.20224v161.89952a25.04192 25.04192 0 0 1-20.1984 24.4992l-107.49952 20.80256 58.19904 86.00064a24.832 24.832 0 0 1-3.00032 31.49824l-116.59776 117.2992a25.1136 25.1136 0 0 1-30.19776 3.99872l-103.30112-59.89888-20.39808 99.3024a24.81152 24.81152 0 0 1-24.09984 19.90144l-167.90016 2.00192h-0.2048z m-35.29728-191.09888c3.00032 0 6.09792 0.50176 9.00096 1.69984a24.8064 24.8064 0 0 1 15.20128 17.19808l30.49984 122.10176 128.1024-1.50016 23.30112-113.60256a24.6272 24.6272 0 0 1 14.19776-17.69984 24.9344 24.9344 0 0 1 22.70208 1.19808l116.59776 67.59936 88.6016-89.09824-67.79904-100.1984c-4.70016-6.90176-5.60128-15.80032-2.40128-23.5008s10.10176-13.30176 18.29888-14.8992l124.40064-24.09984v-121.6l-118.70208-28.09856c-7.79776-1.80224-14.19776-7.30112-17.30048-14.69952s-2.40128-15.80032 1.80224-22.59968l66.0992-107.60192-89.99936-87.90016-104.09984 62.10048c-6.79936 3.99872-15.09888 4.70016-22.4 1.60256a24.93952 24.93952 0 0 1-14.60224-16.9984l-30.69952-124.9024H456.80128l-31.09888 120.4992c-2.00192 7.70048-7.59808 14.10048-15.0016 16.9984s-15.80032 2.0992-22.5024-2.2016L284.20096 196.72064 192.79872 285.02016l66.2016 97.89952c4.59776 6.79936 5.49888 15.29856 2.60096 22.99904a25.088 25.088 0 0 1-17.39776 15.20128l-130.2016 31.20128v123.40224l122.90048 29.99808c7.90016 1.89952 14.40256 7.70048 17.30048 15.29856s1.89952 16.19968-2.69824 22.99904l-70.79936 103.90016 91.6992 88.69888 103.19872-68.80256a24.79104 24.79104 0 0 1 13.99808-4.29568z"-->
<!--                fill="#4887ED" p-id="2194"></path>-->
<!--              <path-->
<!--                d="M512.1024 699.71968c-101.09952 0-183.3984-82.29888-183.3984-183.3984s82.29888-183.3984 183.3984-183.3984 183.3984 82.29888 183.3984 183.3984-82.2016 183.3984-183.3984 183.3984z"-->
<!--                fill="#639DF6" p-id="2195"></path>-->
<!--              <path-->
<!--                d="M512.1024 382.8224c-73.6 0-133.49888 59.89888-133.49888 133.49888s59.89888 133.49888 133.49888 133.49888 133.49888-59.89888 133.49888-133.49888-59.8016-133.49888-133.49888-133.49888z"-->
<!--                fill="#8EB7FE" p-id="2196"></path>-->
<!--            </svg>-->
<!--          </el-tooltip>-->

          <!--修改收款信息图标-->
<!--          <el-tooltip content="修改微信收款信息" placement="top" effect="light">-->
<!--            <svg v-if="false" t="1622877661804" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
<!--                 xmlns="http://www.w3.org/2000/svg"-->
<!--                 p-id="3033" width="30" height="30" @click="handleAdd(2)"-->
<!--                 style="margin:10px 10px 10px 10px ;cursor:pointer;">-->
<!--              <path-->
<!--                d="M794.6 928.22H229.4c-71.43 0-129.52-58.09-129.52-129.52V233.51c0-71.43 58.09-129.52 129.52-129.52h329.7c19.5 0 35.32 15.82 35.32 35.32s-15.82 35.32-35.32 35.32H229.4c-32.47 0-58.87 26.4-58.87 58.87v565.2c0 32.47 26.4 58.87 58.87 58.87h565.2c32.47 0 58.87-26.4 58.87-58.87V374.8c0-19.5 15.82-35.32 35.32-35.32s35.32 15.82 35.32 35.32v423.9c0.01 71.43-58.08 129.52-129.51 129.52z"-->
<!--                fill="#0081FF" p-id="3034"></path>-->
<!--              <path-->
<!--                d="M363.99 745.85c-8 0-16.08-2.71-22.68-8.28-14.95-12.51-16.9-34.82-4.37-49.77l484.38-577.24c12.51-14.95 34.82-16.88 49.77-4.32 14.95 12.51 16.9 34.82 4.37 49.77L391.08 733.24c-6.99 8.33-17 12.61-27.09 12.61z"-->
<!--                fill="#0081FF" p-id="3035"></path>-->
<!--            </svg>-->
<!--          </el-tooltip>-->
        </div>

      </div>
      <el-divider></el-divider>

      <div style="display: flex;justify-content: space-between;align-content: center;padding: 20px 30px 10px 10px">

        <div style="display: flex;justify-content: space-between;align-content:flex-end">
          <svg t="1622876686254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1328" width="50" height="50">
            <path
              d="M872.8576 864.3072H158.2592c-57.1904 0-103.5264-48.4352-103.5264-108.1344v-493.568c0-59.6992 46.336-108.1344 103.5264-108.1344h714.5984c57.1904 0 103.5264 48.4352 103.5264 108.1344v493.568c0 59.6992-46.3872 108.1344-103.5264 108.1344z"
              fill="#8C7BFD" p-id="1329"></path>
            <path
              d="M54.784 287.9488h921.6v102.4h-921.6zM367.4624 558.08H195.6352c-28.2624 0-51.2-22.9376-51.2-51.2s22.9376-51.2 51.2-51.2h171.8272c28.2624 0 51.2 22.9376 51.2 51.2s-22.8864 51.2-51.2 51.2z"
              fill="#FFE37B" p-id="1330"></path>
          </svg>
          <div style="margin-left: 60px">
            <div class="action-card-list__panel-title">
              银行卡
            </div>
            <div class="action-card-list__panel-describe">
              单日提现最高两万元
            </div>
          </div>
        </div>
        <div>


<!--          &lt;!&ndash; 默认收款方式图标 &ndash;&gt;-->
<!--          <el-tooltip v-if="bankDefault" content="默认收款方式" placement="top" effect="light">-->
<!--            <svg t="1622878148571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
<!--                 p-id="6347" width="30" height="30" style="margin:10px 10px 10px 10px ;cursor:pointer;">-->
<!--              <path-->
<!--                d="M511.3 828.3c173.7 0 315.1-141.4 315.1-315.1 0-173.7-141.3-315.1-315.1-315.1-173.7 0-315.1 141.4-315.1 315.1 0.1 173.7 141.4 315.1 315.1 315.1m0 59.1c-206.6 0-374.2-167.5-374.2-374.2 0-206.6 167.6-374.1 374.2-374.1s374.1 167.5 374.1 374.1c0.1 206.7-167.4 374.2-374.1 374.2z"-->
<!--                fill="#1afa29" p-id="6348"></path>-->
<!--              <path-->
<!--                d="M486.4 657.7c-7.5 0-15.1-2.9-20.9-8.6L326.2 509.8c-11.5-11.6-11.5-30.3 0-41.8 5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6l118.3 118.3 188-187.9c5.8-5.8 13.4-8.7 20.9-8.7 7.5 0 15.1 2.9 20.9 8.7 11.5 11.5 11.5 30.2 0 41.7l-208.9 209c-5.7 5.7-13.3 8.6-20.8 8.6z"-->
<!--                fill="#1afa29" p-id="6349"></path>-->
<!--            </svg>-->
<!--          </el-tooltip>-->

          <!-- 查看信息图标 -->
          <el-tooltip v-if="bank" content="查看银行卡信息" placement="top" effect="light">
            <svg t="1622878629082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="7295" width="30" height="30" style="margin:10px 10px 10px 10px ;cursor:pointer;"
                 @click="handleShowDetail(1)">
              <path
                d="M698.71 301.02c-60.96-46.64-122.59-69.073-186.71-69.073S386.25 254.38 325.29 301.02c-60.699 46.44-120.173 116.59-177.696 210.747 57.534 94.323 117.022 164.595 177.732 211.115 60.956 46.707 122.573 69.17 186.674 69.17 64.1 0 125.718-22.463 186.674-69.17 60.71-46.52 120.198-116.792 177.732-211.115-57.523-94.157-116.997-164.307-177.696-210.747zM512 864c-161.102 0-307.306-112.03-438.613-336.088a31.959 31.959 0 0 1 0.01-32.338C204.702 271.858 350.903 160 512 160c161.097 0 307.298 111.858 438.603 335.574a31.959 31.959 0 0 1 0.01 32.338C819.306 751.971 673.102 864 512 864z m0-128c-123.712 0-224-100.288-224-224s100.288-224 224-224 224 100.288 224 224-100.288 224-224 224z"
                fill="#5090F1" p-id="7296"></path>
              <path d="M432 432m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" p-id="7297"></path>
            </svg>
          </el-tooltip>

          <!--配置收款信息图标-->
          <el-tooltip content="配置银行卡信息" placement="top" effect="light">
            <svg v-if="!bank" t="1622877284357" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="2193" width="30" height="30" @click="handleAdd(0)"
                 style="margin:10px 10px 10px 10px ;cursor:pointer;">
              <path
                d="M424.89856 954.61888a25.01632 25.01632 0 0 1-24.20224-18.89792l-26.7008-106.90048-90.50112 60.29824a24.90368 24.90368 0 0 1-31.09888-2.80064l-121.29792-117.2992a24.92416 24.92416 0 0 1-3.3024-31.8976l62.40256-91.49952L83.2 619.52a24.81664 24.81664 0 0 1-19.00032-24.20224V432.72192a24.91904 24.91904 0 0 1 19.0976-24.20224l114.29888-27.60192-57.79456-85.49888a24.91392 24.91392 0 0 1 3.3024-31.8976l120.6016-116.59776a25.04704 25.04704 0 0 1 30.80192-3.0976L386.0992 202.5216l27.40224-105.90208a24.91904 24.91904 0 0 1 24.09984-18.69824h162.49856a24.832 24.832 0 0 1 24.20224 19.00032l27.29984 111.20128 91.60192-54.70208a24.9344 24.9344 0 0 1 30.19776 3.59936l117.89824 115.2a24.98048 24.98048 0 0 1 3.79904 30.8992l-58.50112 95.20128 104.29952 24.80128c11.20256 2.69824 19.2 12.6976 19.2 24.20224v161.89952a25.04192 25.04192 0 0 1-20.1984 24.4992l-107.49952 20.80256 58.19904 86.00064a24.832 24.832 0 0 1-3.00032 31.49824l-116.59776 117.2992a25.1136 25.1136 0 0 1-30.19776 3.99872l-103.30112-59.89888-20.39808 99.3024a24.81152 24.81152 0 0 1-24.09984 19.90144l-167.90016 2.00192h-0.2048z m-35.29728-191.09888c3.00032 0 6.09792 0.50176 9.00096 1.69984a24.8064 24.8064 0 0 1 15.20128 17.19808l30.49984 122.10176 128.1024-1.50016 23.30112-113.60256a24.6272 24.6272 0 0 1 14.19776-17.69984 24.9344 24.9344 0 0 1 22.70208 1.19808l116.59776 67.59936 88.6016-89.09824-67.79904-100.1984c-4.70016-6.90176-5.60128-15.80032-2.40128-23.5008s10.10176-13.30176 18.29888-14.8992l124.40064-24.09984v-121.6l-118.70208-28.09856c-7.79776-1.80224-14.19776-7.30112-17.30048-14.69952s-2.40128-15.80032 1.80224-22.59968l66.0992-107.60192-89.99936-87.90016-104.09984 62.10048c-6.79936 3.99872-15.09888 4.70016-22.4 1.60256a24.93952 24.93952 0 0 1-14.60224-16.9984l-30.69952-124.9024H456.80128l-31.09888 120.4992c-2.00192 7.70048-7.59808 14.10048-15.0016 16.9984s-15.80032 2.0992-22.5024-2.2016L284.20096 196.72064 192.79872 285.02016l66.2016 97.89952c4.59776 6.79936 5.49888 15.29856 2.60096 22.99904a25.088 25.088 0 0 1-17.39776 15.20128l-130.2016 31.20128v123.40224l122.90048 29.99808c7.90016 1.89952 14.40256 7.70048 17.30048 15.29856s1.89952 16.19968-2.69824 22.99904l-70.79936 103.90016 91.6992 88.69888 103.19872-68.80256a24.79104 24.79104 0 0 1 13.99808-4.29568z"
                fill="#4887ED" p-id="2194"></path>
              <path
                d="M512.1024 699.71968c-101.09952 0-183.3984-82.29888-183.3984-183.3984s82.29888-183.3984 183.3984-183.3984 183.3984 82.29888 183.3984 183.3984-82.2016 183.3984-183.3984 183.3984z"
                fill="#639DF6" p-id="2195"></path>
              <path
                d="M512.1024 382.8224c-73.6 0-133.49888 59.89888-133.49888 133.49888s59.89888 133.49888 133.49888 133.49888 133.49888-59.89888 133.49888-133.49888-59.8016-133.49888-133.49888-133.49888z"
                fill="#8EB7FE" p-id="2196"></path>
            </svg>
          </el-tooltip>


          <!--修改收款信息图标-->
          <el-tooltip content="修改银行卡信息" placement="top" effect="light">
            <svg v-if="bank" t="1622877661804" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="3033" width="30" height="30" @click="handleAdd(1)"
                 style="margin:10px 10px 10px 10px ;cursor:pointer;">
              <path
                d="M794.6 928.22H229.4c-71.43 0-129.52-58.09-129.52-129.52V233.51c0-71.43 58.09-129.52 129.52-129.52h329.7c19.5 0 35.32 15.82 35.32 35.32s-15.82 35.32-35.32 35.32H229.4c-32.47 0-58.87 26.4-58.87 58.87v565.2c0 32.47 26.4 58.87 58.87 58.87h565.2c32.47 0 58.87-26.4 58.87-58.87V374.8c0-19.5 15.82-35.32 35.32-35.32s35.32 15.82 35.32 35.32v423.9c0.01 71.43-58.08 129.52-129.51 129.52z"
                fill="#0081FF" p-id="3034"></path>
              <path
                d="M363.99 745.85c-8 0-16.08-2.71-22.68-8.28-14.95-12.51-16.9-34.82-4.37-49.77l484.38-577.24c12.51-14.95 34.82-16.88 49.77-4.32 14.95 12.51 16.9 34.82 4.37 49.77L391.08 733.24c-6.99 8.33-17 12.61-27.09 12.61z"
                fill="#0081FF" p-id="3035"></path>
            </svg>
          </el-tooltip>

        </div>

      </div>
      <el-divider></el-divider>
    </el-row>
    <el-row>


    </el-row>

    <!-- 添加或修改收款信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @keyup.enter.native="submitForm">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="开户行" prop="bankCode">
          <el-select v-model="form.bankCode" placeholder="请选择银行卡开户行">
            <el-option
              v-for="dict in bankCodeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行卡号" prop="bankNo">
          <el-input v-model="form.bankNo" placeholder="请输入银行卡号"/>
        </el-form-item>
        <el-form-item label="持卡人姓名" prop="bankName">
          <el-input v-model="form.bankName" placeholder="请输入银行卡收款方用户名"/>
        </el-form-item>
        <el-form-item label="银行卡照片" prop="bankImgUrl">
          <imageUpload v-model="form.bankImgUrl"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 查看收款信息对话框 -->
    <el-dialog
      :title="viewTitle"
      :visible.sync="viewOpen"
      width="700px"
      append-to-body
    >
      <el-form ref="detailForm">
        <div>
          <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i>
          <div class="MmsUiBlockTitle___title___2C-H-1-44-1">
            <span>收款配置信息</span>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-form-item label="开户行">
                  <span>{{ showData.bankCode }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-form-item label="银行卡号">
                  <span>{{ showData.bankNo }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item>
                <el-form-item label="持卡人姓名">
                  <span>{{ showData.bankName }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="银行卡照片">
                <el-image
                  :src="showData.bankImgUrl"
                  style="width: 100px; height: 100px"
                  :z-index="zIndex"
                  :preview-src-list="[showData.bankImgUrl]"
                ></el-image>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div>
          <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i>
          <div class="MmsUiBlockTitle___title___2C-H-1-44-1">
            <span>其他信息</span>
          </div>
        </div>
        <el-divider></el-divider>
        <!--        <div style="margin-left: 50px">-->
        <!--          <el-row>-->
        <!--            <el-col :span="12">-->
        <!--              <el-form-item label="更新时间">-->
        <!--                <span>{{ showData.updateTime }}</span>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-col :span="12">-->
        <!--              <el-form-item label="更新人账号">-->
        <!--                <span>{{ showData.updateName }}</span>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--          </el-row>-->

        <!--          <el-row>-->
        <!--            <el-col :span="12">-->
        <!--              <el-form-item label="创建时间">-->
        <!--                <span>{{ showData.createTime }}</span>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--            <el-col :span="12">-->
        <!--              <el-form-item label="创建人账号">-->
        <!--                <span>{{ showData.createName }}</span>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--          </el-row>-->

        <!--        </div>-->
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import {listPay, getPay, delPay, addPay, updatePay, getSupplierPay} from "@/api/supplier/pay";
  import ImageUpload from '@/components/ImageUpload';

  export default {
    name: "Pay",
    components: {ImageUpload},
    data() {
      return {
        zIndex: 3000,
        //银行卡是否配置
        bank: false,
        //银行卡是否是默认
        bankDefault: true,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 收款信息表格数据
        payList: [],
        // 弹出层标题
        title: "",
        //查看详细标题
        viewTitle: "",
        // 是否显示弹出层
        open: false,
        //是否显示查看详细弹出层
        viewOpen: false,
        //查看详细数据
        showData: [],
        //微信详细数据
        weChatData: [],
        //银行卡数据详细
        bankData: [],
        // 银行卡开户行字典
        bankCodeOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          platformUid: null,
          supplierUid: null,
          bankCode: null,
          bankNo: null,
          bankName: null,
          bankImgUrl: null,
          payType: null,
          payWxOpenid: null,
          payWxNickname: null,
          payWxHeadUrl: null,
        },
        columns: [
          {
            label: '审核操作人ID',
            dataIndex: 'payUid',
          },
          {
            label: '平台ID',
            dataIndex: 'platformUid',
          },
          {
            label: '供应商ID',
            dataIndex: 'supplierUid',
          },
          {
            label: '银行卡开户行',
            dataIndex: 'bankCode',
          },
          {
            label: '银行卡号',
            dataIndex: 'bankNo',
          },
          {
            label: '银行卡收款方用户名',
            dataIndex: 'bankName',
          },
          {
            label: '银行卡照片url',
            dataIndex: 'bankImgUrl',
          },
          {
            label: '付款方式（1银行卡/2微信号）',
            dataIndex: 'payType',
          },
          {
            label: '付款微信openid',
            dataIndex: 'payWxOpenid',
          },
          {
            label: '付款微信昵称',
            dataIndex: 'payWxNickname',
          },
          {
            label: '付款微信头像',
            dataIndex: 'payWxHeadUrl',
          },
          {
            label: '数据状态',
            dataIndex: 'payCheckStatus',
          },
          {
            label: '数据状态',
            dataIndex: 'updateTime',
          },
          {
            label: '审核时间',
            dataIndex: 'checkTime',
          },
          {
            label: '审核操作人ID',
            dataIndex: 'checkUid',
          },
        ],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          bankNo: [
            {required: true, message: '请输入银行卡号', trigger: 'blur'},
            {min: 16, max: 20, message: '长度在 16 到 20 个字符', trigger: 'blur'}
          ],
          bankName: [
            {required: true, message: '请输入持卡人姓名', trigger: 'change'}
          ],
          bankCode: [
            {required: true, message: '请选择开户行', trigger: 'change'}
          ],
        }
      };
    },
    created() {
      this.getList();
      this.getDicts("sys_bank_number").then(response => {
        this.bankCodeOptions = response.data;
      });
    },
    methods: {
      /** 查询收款信息列表 */
      getList(o) {
        getSupplierPay().then(response => {
          this.bankPay = response.data.bankPay
          this.weChatData = response.data.weChatPay
          this.bank = (response.data.bankPay != null || response.data.bankPay.leading > 0)
          console.log( this.bank)
          console.log(response.data.bankPay != null)
          console.log(response.data.bankPay.leading > 0)
          console.log(response.data.bankPay != null || response.data.bankPay.leading > 0)
          console.log(this.bank)

        })
        this.loading = true;


      },
      bankCodeFormat(row, column) {
        return this.selectDictLabel(this.bankCodeOptions, row.bankCode);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          payUid: null,
          platformUid: null,
          supplierUid: null,
          bankCode: null,
          bankNo: null,
          bankName: null,
          bankImgUrl: null,
          payType: null,
          payWxOpenid: null,
          payWxNickname: null,
          payWxHeadUrl: null,
          payCheckStatus: "0",
          updateTime: null,
          checkTime: null,
          checkUid: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.payUid)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd(o) {
        debugger
        this.reset();
        this.open = true;
        this.title = "添加收款信息";

        if (o == 1) {
          getSupplierPay().then(response => {
            this.form = response.data.bankPay
          })
        }

        this.getList();
      },
      /** 查看详情按钮操作 **/
      handleShowDetail(o) {
        this.viewOpen = true;
        this.viewTitle = "查看收款信息";
        if (o == 1) {
          this.showData = this.bankPay;
        } else {
          this.showData = this.weChatData;
        }


      },
      handCloseDetail() {
        this.viewOpen = false
        this.showData = []
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();

        const payUid = row.payUid || this.ids
        getPay(payUid).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改收款信息";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.payUid != null) {
              updatePay(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addPay(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const payUids = row.payUid || this.ids;
        this.$confirm('是否确认删除收款信息编号为"' + payUids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delPay(payUids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('supplier/pay/export', {
          ...this.queryParams
        }, `supplier_pay.xlsx`)
      }
    }
  };
</script>

<style>

  .first-title__title {
    font-size: 20px;
    font-weight: 500;
    color: #323234;
    margin-bottom: 7px;
  }

  .first-title__desc {
    color: #969799;
    line-height: 18px;
    margin-bottom: 30px;
  }

  .action-card-list__panel-title {
    font-size: 14px;
    color: #323233;
    line-height: 24px;
  }

  .action-card-list__panel-describe {
    font-size: 12px;
    color: #969799;
    line-height: 20px;
  }
</style>
